<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view class="coupon">
            <image :src="data.__wxapp_img.dapp.bg.url"></image>
            <view style="padding:36upx 48upx;width:100%;height:100%">
                <view class="flex-row" style="width:100%;height:100%;line-height:1;">
                    <view class="flex-grow-1 flex-x-center flex-y-center">
                        <view class="flex-y-bottom">
                            <view style="font-size:21px;">￥</view>
                            <view style="font-size:40px;">{{data.coupon.sub_price}}</view>
                        </view>
                    </view>
                    <view class="flex-grow-1 flex-y-center">
                        <view>
                            <view style="font-size:17px;margin-bottom:14upx;">优惠券</view>
                            <view style="font-size:15px;">满{{data.coupon.min_price}}元可用</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="ci_integral flex-y-center">
            <view class="flex-y-bottom">
                <text style="font-size:23px;">{{data.coupon.integral}}</text>
                <text style="font-size:15px;">积分<block v-if="data.coupon.price>0">+<text style="font-size:23px;">￥{{data.coupon.price}}</text>
                    </block>
                </text>
            </view>
        </view>
        <view class="ci_shuoming">
            优惠券说明
        </view>
        <view class="ci_shuoming2">
            <view style="padding:0 24upx 10upx 24upx;">
                优惠券有效期：
                <block v-if="data.coupon.expire_type==1">
                    兑换后{{data.coupon.expire_day}}天
                </block>
                <block v-else>
                    {{data.coupon.begin_time}} - {{data.coupon.end_time}}
                </block>
            </view>
            <view style="padding-bottom:10upx;padding-right:24upx;">
                <text style="padding-left:24upx;">适用范围:</text>
                <text style="padding-left:24upx;" v-if="data.info.length==0">全场通用</text>
                <block v-else>
                    <text style="display:inline-block;padding:10upx 0 0 24upx;" v-for="(item,index) in data.info" :key="index">{{item.name}}</text>
                </block>
            </view>
            <view style="padding:0 24upx;">使用说明：本优惠券总剩余{{data.coupon.total_num}}张，每人限领{{data.coupon.user_num}}张。兑换成功后，优惠券将直接放入“我的优惠券”中。优惠券一经兑换，一律不退还积分。</view>
        </view>
        <view class="ci-btn-view flex-x-center flex-y-center">
            <view @tap="exchangeCoupon" class="ci-btn flex-x-center flex-y-center">立即兑换</view>
        </view>
        <view class=" flex-x-center flex-y-center" id="modal-mask" v-if="data.showModel">
            <view class="modal">
                <view @tap="hideModal" class="modal-close">
                    <image :src="data.__wxapp_img.integral.close.url" style="width:50upx;height:50upx;"></image>
                </view>
                <view class="flex-row flex-x-center flex-y-center" style="padding:88upx 0;" v-if="data.status==1">
                    <view class="modal-left flex-grow-1 flex-x-center">
                        <image :src="data.__wxapp_img.integral.shibai.url" style="width:124upx;height:134upx;"></image>
                    </view>
                    <view class="flex-grow-1 flex-y-bottom" style="width:50%;">
                        <view style="color:#353535;width:100%">
                            <view style="margin-bottom:30upx;font-size:13pt;">兑换失败！</view>
                            <view class="text-more">{{data.content}}</view>
                        </view>
                    </view>
                </view>
                <block v-if="data.status==4">
                    <view class="modal-head" style="margin-top: -216upx;">
                        <image :src="data.__wxapp_img.integral.success.url" style="width:100%;height:100%;"></image>
                    </view>
                    <view class="modal-body flex-x-center flex-y-center">
                        <view>{{data.content}}</view>
                    </view>
                    <view class="modal-footer flex-row">
                        <view class="flex-grow-1 flex-x-center flex-y-center">
                            <navigator hoverClass="none" openType="redirect" url="/pages/coupon/coupon">
                                <view class="modal-btn-1 flex-x-center flex-y-center">我的优惠券</view>
                            </navigator>
                        </view>
                        <view class="flex-grow-1 flex-x-center flex-y-center">
                            <navigator hoverClass="none" openType="redirect" url="/pages/index/index">
                                <view class="modal-btn-2 flex-x-center flex-y-center">立即使用</view>
                            </navigator>
                        </view>
                    </view>
                </block>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        showModel: !1
    },
			};
		},
		onLoad: function(t) {myVue = this;
        if (myVue.getApp.page.onLoad(this, t), t.coupon_id) {
            var e = t.coupon_id, n = this;
            myVue.getApp.request({
                url: myVue.getApp.api.integral.coupon_info,
                data: {
                    coupon_id: e
                },
                success: function(t) {
                    0 == t.code && n.setData({
                        coupon: t.data.coupon,
                        info: t.data.info
                    });
                }
            });
        }
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			exchangeCoupon: function(t) {
        var e = this, n = e.data.coupon, o = e.data.__user_info.integral;
        if (parseInt(n.integral) > parseInt(o)) e.setData({
            showModel: !0,
            content: "当前积分不足",
            status: 1
        }); else {
            if (parseFloat(n.price) > 0) a = "需要" + n.integral + "积分+￥" + parseFloat(n.price); else var a = "需要" + n.integral + "积分";
            if (parseInt(n.total_num) <= 0) return void e.setData({
                showModel: !0,
                content: "已领完,来晚一步",
                status: 1
            });
            if (parseInt(n.num) >= parseInt(n.user_num)) return n.type = 1, void e.setData({
                showModel: !0,
                content: "兑换次数已达上限",
                status: 1
            });
            myVue.getApp.core.showModal({
                title: "确认兑换",
                content: a,
                success: function(t) {
                    t.confirm && (parseFloat(n.price) > 0 ? (myVue.getApp.core.showLoading({
                        title: "提交中"
                    }), myVue.getApp.request({
                        url: myVue.getApp.api.integral.exchange_coupon,
                        data: {
                            id: n.id,
                            type: 2
                        },
                        success: function(t) {
                            0 == t.code ? e.getApp.core.requestPayment({
                                _res: t,
                                timeStamp: t.data.timeStamp,
                                nonceStr: t.data.nonceStr,
                                package: t.data.package,
                                signType: t.data.signType,
                                paySign: t.data.paySign,
                                complete: function(a) {
                                    "requestPayment:fail" != a.errMsg && "requestPayment:fail cancel" != a.errMsg ? "requestPayment:ok" == a.errMsg && (n.num = parseInt(n.num), 
                                    n.num += 1, n.total_num = parseInt(n.total_num), n.total_num -= 1, o = parseInt(o), 
                                    o -= parseInt(n.integral), e.setData({
                                        showModel: !0,
                                        status: 4,
                                        content: t.msg,
                                        coupon: n
                                    })) : e.getApp.core.showModal({
                                        title: "提示",
                                        content: "订单尚未支付",
                                        showCancel: !1,
                                        confirmText: "确认"
                                    });
                                }
                            }) : e.setData({
                                showModel: !0,
                                content: t.msg,
                                status: 1
                            });
                        },
                        complete: function() {
                            e.getApp.core.hideLoading();
                        }
                    })) : (myVue.getApp.core.showLoading({
                        title: "提交中"
                    }), myVue.getApp.request({
                        url: myVue.getApp.api.integral.exchange_coupon,
                        data: {
                            id: n.id,
                            type: 1
                        },
                        success: function(t) {
                            0 == t.code ? (n.num = parseInt(n.num), n.num += 1, n.total_num = parseInt(n.total_num), 
                            n.total_num -= 1, o = parseInt(o), o -= parseInt(n.integral), e.setData({
                                showModel: !0,
                                status: 4,
                                content: t.msg,
                                coupon: n
                            })) : e.setData({
                                showModel: !0,
                                content: t.msg,
                                status: 1
                            });
                        },
                        complete: function() {
                            e.getApp.core.hideLoading();
                        }
                    })));
                }
            });
        }
    },
    hideModal: function() {
        this.setData({
            showModel: !1
        });
    }
		},
	}
</script>

<style scoped>
page {
    background-color: #fff;
}

.coupon {
    height: 270upx;
}

.coupon image {
    width: 100%;
    height: 270upx;
    position: absolute;
    z-index: -1;
}

.ci_price {
    width: 52%;
    float: left;
}

.ci_price view {
    margin-top: 70upx;
    float: right;
    color: #353535;
    font-weight: bolder;
}

.ci_right {
    float: right;
    margin-top: 76upx;
    width: 48%;
    padding-left: 40upx;
}

.ci_font {
    float: left;
}

.ci_font view {
    color: #353535;
}

.ci_integral {
    height: 140upx;
    color: #353535;
    display: flex;
    align-items: center;
    padding-left: 24upx;
    border-bottom: 1upx solid #ededed;
}

.ci_shuoming {
    margin: 40upx 24upx;
    color: #353535;
    font-size: 13px;
    border-left: 6upx solid #ff4544;
    padding-left: 8upx;
}

.ci_shuoming2 {
    color: #666;
    font-size: 13px;
}

.ci-btn-view {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    height: 120upx;
    width: 100%;
    border-top: 1upx solid #ededed;
}

.ci-btn {
    width: 702upx;
    height: 80upx;
    background-color: #ff4544;
    color: #fff;
    border-radius: 40upx;
    font-size: 13pt;
}

#modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--window-top);
    left: 0;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 7777;
    color: #fff;
}

.modal {
    width: 574upx;
    height: auto;
    background-color: #fff;
    border-radius: 16upx;
    position: relative;
}

.modal-head {
    width: 100%;
    height: 332upx;
}

.modal-body {
    margin: 40upx 0 48upx 0;
    color: #353535;
    font-size: 26upx;
}

.modal-footer {
    width: 100%;
    margin-bottom: 48upx;
}

.modal-btn-1 {
    width: 228upx;
    height: 64upx;
    border-radius: 64upx;
    border: 1upx solid #999;
    color: #353535;
    font-size: 11pt;
    padding: 10upx;
}

.modal-btn-2 {
    width: 228upx;
    height: 64upx;
    border-radius: 64upx;
    color: #fff;
    font-size: 11pt;
    background-color: #ff4544;
    padding: 10upx;
}

.modal-close {
    position: absolute;
    right: 16upx;
    top: 16upx;
}

.modal-left {
    width: 124upx;
    height: 134upx;
    width: 50%;
}
</style>
